iOS动画总结

简介

    iOS上的动画主要是指Core Animation框架

    Core Animation是IOS和OS X平台上负责图形渲染与动画的基础框架。Core Animation可以作用与动画视图或者其他可视元素,为你完成了动画所需的大部分绘帧工作。你只需要配置少量的动画参数(如开始点的位置和结束点的位置)即可使用Core Animation的动画效果。

    Core Animation将大部分实际的绘图任务交给了图形硬件来处理,图形硬件会加速图形渲染的速度。这种自动化的图形加速技术让动画拥有更高的帧率并且显示效果更加平滑,不会加重CPU的负担而影响程序的运行速度。

   核心动画所在的位置如下图所示:

Core Animation类图

    Core Animation类的继承关系:

  • CAAnimation:是所有动画对象的父类,实现CAMediaTiming协议,负责控制动画的时间、速度和时间曲线等等,是一个抽象类,不能直接使用。
  • CAAnimationGroup: 组动画,将多个动画合并到一起,并发执行
  • CAPropertyAnimation :是CAAnimation的子类,它支持动画地显示图层的keyPath,一般不直接使用。
    • CABasicAnimation: 基础动画
    • CAKeyframeAnimation:关键帧动画
  • CATransaction: 过渡动画

常用属性

  • duration: 动画的持续时间
  • beginTime: 动画的开始时间
  • repeatCount: 动画的重复次数
  • timingFunction: 动画的时间节奏控制
    • kCAMediaTimingFunctionLinear 匀速
    • kCAMediaTimingFunctionEaseIn 慢进
    • kCAMediaTimingFunctionEaseOut 慢出
    • kCAMediaTimingFunctionEaseInEaseOut 慢进慢出
    • kCAMediaTimingFunctionDefault 默认值(慢进慢出)
  • delegate: 动画代理监听动画开始与结束
  • keyPath:可以指定keyPath为CALayer的属性值,并对它的值进行修改,以达到对应的动画效果,需要注意的是部分属性值是不支持动画效果的。

使用方式

CABasicAnimation

  基础动画主要提供了对于CALayer对象中的可变属性进行简单动画的操作,比如:位移、透明度、缩放、旋转、背景色等等。
重要属性:
fromValue : 不为空时,动画始终从此值开始
toValue : 不为空时动画结束时的值
byValue : 不为空时对fromValue追加的值
动画演示:
基础动画
代码演示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
        let move = CABasicAnimation(keyPath: "position.x")
move.duration = 1
move.byValue = 200
/* 等价于
move.fromValue = 187
move.toValue = 387
*/
// move.isRemovedOnCompletion = false
// move.fillMode = kCAFillModeForwards
/*
isRemovedOnCompletion = false &&
fillMode = kCAFillModeForwards时动画结束不会复原
*/
myView.layer.add(move, forKey: "moveAnimation")

CAKeyframeAnimation

  CAKeyframeAnimation和CABaseAnimation都属于CAPropertyAnimatin的子类。CABaseAnimation只能从一个数值(fromValue)变换成另一个数值(toValue),而CAKeyframeAnimation则会使用一个NSArray保存一组关键帧。
CABaseAnimation可以说是只有两个关键帧CAKeyframeAnimation
重要属性
values : 就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧
path : 可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path,那么values将被忽略.
keyTimes : 可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的。
动画演示:
关键帧动画
代码演示:

1
2
3
4
5
6
7
let key = CAKeyframeAnimation(keyPath: "position")
key.duration = 2.0
key.values = [CGPoint(x: 100, y: 150),
CGPoint(x: 250, y: 250),
CGPoint(x: 250, y: 300),
CGPoint(x: 350, y: 300)]
myView.layer.add(key, forKey: "keyAnimation")

CAAnimationGroup

  CAAnimation的子类,可以保存一组动画对象,将CAAnimationGroup对象加入层后,组中所有动画对象可以同时并发运行。
animations : 用来保存一组动画对象的NSArray
动画演示:
组动画
代码演示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let key = CAKeyframeAnimation(keyPath: "position")
key.duration = 2.0
key.values = [CGPoint(x: 100, y: 150),
CGPoint(x: 250, y: 250),
CGPoint(x: 250, y: 300),
CGPoint(x: 350, y: 300)]

let opacity = CABasicAnimation(keyPath: "opacity")
opacity.duration = 1
opacity.toValue = 0

let move = CABasicAnimation(keyPath: "transform.rotation.z")
move.duration = 1
move.toValue = CGFloat.pi*2.0

let group = CAAnimationGroup()
group.duration = 3
group.animations = [key,opacity,move]
myView.layer.add(group, forKey: "groupAnimation")

CATransaction

CAAnimation的子类,用于做过渡动画或者转场动画,能够为层提供移出屏幕和移入屏幕的动画效果。
重要属性
type : 动画的过渡类型

Apple提供四种过渡效果

  • kCATransitionFade 渐变效果
  • kCATransitionMoveIn 进入覆盖效果
  • kCATransitionPush 推出效果
  • kCATransitionReveal 揭露离开效果

还有部分私有API效果酷炫但不推荐使用

subtype : 动画过渡方向

  • kCATransitionFromRight 从右侧进入
  • kCATransitionFromLeft 从左侧进入
  • kCATransitionFromTop 从顶部进入
  • kCATransitionFromBottom 从底部进入

动画演示:
组动画
代码演示:

1
2
3
4
5
6
7
8
        changeView()
let fade = CATransition()
fade.duration = 1
fade.type = kCATransitionFade
fade.subtype = kCATransitionFromRight
// fade.startProgress = 0.3
// fade.endProgress = 0.8
myView.layer.add(fade, forKey: "fadeAnimation")

经典案例

案例

Demo地址在CoreAnimationDemo